
<div class="gid_20_table_title" style="display:block">文章</div>
<div class="gid_20_table_content">
    <div class="layui-card gid_20">
        <!-- 搜索表单区 -->
        <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="gid-20-tno-2-cms_article-search-form">
            <div class="layui-form-item">
            #set(initValue = 'catalog_id' == filterKey?filterValue:'')
            #set(disabled = 'catalog_id'.equals(filterKey))

            <!-- 所在栏目组件类型：select -->
                        <!-- 下拉表单 -->
                        <div class="layui-inline">
                            <label class="layui-form-label">所在栏目</label>
                            <div class="layui-input-inline">
                                <div id="gid-20-tno-2_catalog_id_search_select" name="catalog_id"></div>
                            </div>
                        </div>

            #set(initValue = 'article_type' == filterKey?filterValue:'')
            #set(disabled = 'article_type'.equals(filterKey))

            <!-- 文章类型组件类型：select -->
                        <!-- 下拉表单 -->
                        <div class="layui-inline">
                            <label class="layui-form-label">文章类型</label>
                            <div class="layui-input-inline">
                                <select id="gid-20-tno-2_article_type_search_select" name="article_type" xm-select-search="" xm-select-radio=""
                                    placeholder="请选择文章类型" autocomplete="off" xm-select-height="36px" xm-select-skin="normal" xm-select="gid-20-tno-2_article_type_search_select" lay-filter="gid-20-tno-2_article_type_search_select">
                                    <option value="">请选择文章类型</option>
                                </select>
                            </div>
                        </div>

            #set(initValue = 'article_title' == filterKey?filterValue:'')
            #set(disabled = 'article_title'.equals(filterKey))

            <!-- 标题组件类型：text -->
                    <div class="layui-inline">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="article_title__op__like" value="#(initValue)" #(disabled?'disabled':'') placeholder="请输入标题" class="layui-input" autocomplete="off">
                        </div>
                    </div>

            #set(initValue = 'article_subtitle' == filterKey?filterValue:'')
            #set(disabled = 'article_subtitle'.equals(filterKey))

            <!-- 副标题组件类型：text -->
                    <div class="layui-inline">
                        <label class="layui-form-label">副标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="article_subtitle__op__notlike" value="#(initValue)" #(disabled?'disabled':'') placeholder="请输入副标题" class="layui-input" autocomplete="off">
                        </div>
                    </div>

            #set(initValue = 'article_content' == filterKey?filterValue:'')
            #set(disabled = 'article_content'.equals(filterKey))

            <!-- 文章内容组件类型：text -->
                    <div class="layui-inline">
                        <label class="layui-form-label">文章内容</label>
                        <div class="layui-input-inline">
                            <input type="text" name="article_content__op__like" value="#(initValue)" #(disabled?'disabled':'') placeholder="请输入文章内容" class="layui-input" autocomplete="off">
                        </div>
                    </div>

            #set(initValue = 'source' == filterKey?filterValue:'')
            #set(disabled = 'source'.equals(filterKey))

            <!-- 来源组件类型：text -->
                    <div class="layui-inline">
                        <label class="layui-form-label">来源</label>
                        <div class="layui-input-inline">
                            <input type="text" name="source__op__like" value="#(initValue)" #(disabled?'disabled':'') placeholder="请输入来源" class="layui-input" autocomplete="off">
                        </div>
                    </div>

            #set(initValue = 'author' == filterKey?filterValue:'')
            #set(disabled = 'author'.equals(filterKey))

            <!-- 作者组件类型：text -->
                    <div class="layui-inline">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="author" value="#(initValue)" #(disabled?'disabled':'') placeholder="请输入作者" class="layui-input" autocomplete="off">
                        </div>
                    </div>

            #set(initValue = 'create_datetime' == filterKey?filterValue:'')
            #set(disabled = 'create_datetime'.equals(filterKey))

            <!-- 创建时间组件类型：datetime -->
                    <div class="layui-inline">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="create_datetime__op__close_range" id="gid-20-tno-2-create_datetime_search_datetime" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss"  value="#if(isDateObject(initValue)) #date(initValue, 'yyyy-MM-dd HH:mm:ss') #else #(initValue) #end">
                        </div>
                    </div>
            #set(initValue = 'publish_datetime' == filterKey?filterValue:'')
            #set(disabled = 'publish_datetime'.equals(filterKey))

            <!-- 发布时间组件类型：datetime -->
                    <div class="layui-inline">
                        <label class="layui-form-label">发布时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="publish_datetime__op__close_range" id="gid-20-tno-2-publish_datetime_search_datetime" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss"  value="#if(isDateObject(initValue)) #date(initValue, 'yyyy-MM-dd HH:mm:ss') #else #(initValue) #end">
                        </div>
                    </div>
            #set(initValue = 'modify_datetime' == filterKey?filterValue:'')
            #set(disabled = 'modify_datetime'.equals(filterKey))

            <!-- 修改时间组件类型：datetime -->
                    <div class="layui-inline">
                        <label class="layui-form-label">修改时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="modify_datetime__op__close_range" id="gid-20-tno-2-modify_datetime_search_datetime" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss"  value="#if(isDateObject(initValue)) #date(initValue, 'yyyy-MM-dd HH:mm:ss') #else #(initValue) #end">
                        </div>
                    </div>
            #set(initValue = 'status' == filterKey?filterValue:'')
            #set(disabled = 'status'.equals(filterKey))

            <!-- 状态组件类型：select -->
                        <!-- 枚举表单 -->
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="status" #(disabled?'disabled':'') lay-verify="">
                                    <option value="">请选择</option>
                                    #set(initValue = ('Integer' == 'Boolean')? (initValue == true?'1':(initValue == false?'0':initValue)) : initValue)
                                    <option value="0" #('0'==initValue? 'selected':'')>未发布</option>
                                    <option value="1" #('1'==initValue? 'selected':'')>已发布</option>
                                </select>
                            </div>
                        </div>

                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="gid-20-tno-2-btn-cms_article-form-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <!-- 列表区 -->
        <div class="layui-card-body">

            <!-- 头部工具栏模板 -->
            <script type="text/html" id="cms_article_header_toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="dels">删除</button>
                </div>
            </script>

            <!-- 列表表格 -->
            <table id="gid-20-tno-2-cms_article-table" lay-filter="gid-20-tno-2-cms_article-table" style="width: 100%"></table>

            <!-- 缩略图列表显示模板 -->
            <script type="text/html" id="gid-20-tno-2-thumbnail_templet">
                {{#("#")  if(d.thumbnail_file_type && d.thumbnail_file_type.indexOf("IMAGE") >=0 ) { }}
                <img title="预览 - {{d.thumbnail_file_name}}" src="/file/download?fileId={{ d.thumbnail }}" class="table-row-image" style="cursor:pointer;"
                    onclick="layui.layer.photos({ photos: { id: 1, start: 0, title: '', data: [ { alt: '{{d.thumbnail_file_name}}', pid: 666, src: '/file/download?fileId={{d.thumbnail}}', } ] } })"
                >
                {{#("#")  } else if(d.thumbnail) { }}
                <img title="下载 - {{d.thumbnail_file_name}}" src="/assets/layuiadmin/start/layui/lay/modules/xFile/img/file.svg" class="table-row-image" style="cursor:pointer;"
                    onclick="window.open('/file/download?fileId={{ d.thumbnail}}','_blank')"
                >
                {{#("#")  } else { }}
                --
                {{#("#")  } }}
            </script>

            <!-- 每行操作按钮模板 -->
            <script type="text/html" id="gid-20-tno-2-cms_article_row_toolbar">
                <a class="layui-btn layui-btn-default layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit table_btn_icon"></i></a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete table_btn_icon"></i></a>
            </script>
        </div>
    </div>
</div>
<!-- JS脚本区 -->
<script>

    layui.use(['table', 'form', 'layer', 'laydate', 'jquery', 'admin', 'number', 'xSelects'], function () {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate, table = layui.table, admin = layui.admin, number = layui.number, xSelects = layui.xSelects;

        form.render(null, 'gid-20-tno-2-cms_article-search-form');

                    var initValue = '#('catalog_id' == filterKey?filterValue:'')';
                    #set(disabled = 'catalog_id'.equals(filterKey))
                    //渲染所在栏目下拉分页选择器
                    xSelects.render({
                        selectId: 'gid-20-tno-2_catalog_id_search_select',
                        url: '/cms/article/table2/catalog_id/cms_catalog/list',
                        titleKey: 'catalog_name',
                        valueKey: 'catalog_id',
                        searchKey: 'catalog_name__op__like',
                        showPage: true,
                        size: 10,
                        multiSelect: false,
                        model: { type: 'fixed' },
                        zIndex: 1000000000,
                        disabled: #(disabled),
                        init: initValue!=''?[{val:initValue}]:[],
                        tree: {
                            pidKey: 'catalog_pid',
                            pidFilterParamName: 'catalog_pid__op__eq',
                            expandedKeys:true,
                            lazy: false,
                        },
                        // data: [
                        //     {
                        //         name: '请选择',
                        //         value: 0,
                        //         disabled: true,
                        //         children: []
                        //     }
                        // ],
                        // 初始值设置
                        initValues: initValue!=''?[initValue]:[]
                    });

                    var initValue = '#('article_type' == filterKey?filterValue:'')';
                    //渲染文章类型下拉分页选择器
                    xSelects.render({
                      selectId: 'gid-20-tno-2_article_type_search_select',
                      url: '/system/dic/list?dic_pid=17&valueKey=dic_code',
                      titleKey: 'dic_name',
                      valueKey: 'dic_code',
                      searchKey: 'dic_name__op__like',
                      showPage: true,
                      size: 10,
                      multiSelect: false,
                      model: { type: 'fixed' },
                      zIndex: 1000000000,
                      // 初始值设置
                      initValues: initValue!=''?[initValue]:[],
                    });

                //渲染创建时间日期时间选择器
                laydate.render({ elem: '#gid-20-tno-2-create_datetime_search_datetime' ,type: 'datetime', range: true });

                //渲染发布时间日期时间选择器
                laydate.render({ elem: '#gid-20-tno-2-publish_datetime_search_datetime' ,type: 'datetime', range: true });

                //渲染修改时间日期时间选择器
                laydate.render({ elem: '#gid-20-tno-2-modify_datetime_search_datetime' ,type: 'datetime', range: true });

        // 表单搜索监听
        form.on('submit(gid-20-tno-2-btn-cms_article-form-search)', function (data) {
            console.log('gid-20-tno-2-cms_article-search-form', data)
            var field = data.field;
            #if(notBlank(filterKey))
            field = { ...field, '#(filterKey)': '#(filterValue)' }
            #end
            //执行重载
            table.reload('gid-20-tno-2-cms_article-table', {
                where: field,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });
        // 渲染表格数据
        var tableIns = table.render({
            id: 'gid-20-tno-2-cms_article-table',
            elem: '#gid-20-tno-2-cms_article-table',
            // 树表格专用参数
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'article_id',
                pidName: '',
                arrowType: 'arrow2',
                onlyIconControl: true,
            },
            toolbar: '#cms_article_header_toolbar',
            url: '/cms/article/table2/list',
            #if(notBlank(filterKey))
            where: { #(filterKey): "#(filterValue)" },
            #end
            loading: true,
            page: true, //开启分页
            cols: [[
                {type: 'checkbox', fixed: 'left'},

                {field: 'catalog_id', title: '所在栏目', templet: function (row){
                    if(row.catalog_id_title){
                        return row.catalog_id_title;
                    }
                    return '--';
                }},

                {field: 'article_type', title: '文章类型', templet: function (row){
                    if(row.article_type_title){
                        return row.article_type_title;
                    }
                    return '--';
                }},

                    {field: 'article_title', title: '标题'},

                    {field: 'source', title: '来源'},

                    {field: 'author', title: '作者'},

                    {field: 'publish_datetime', title: '发布时间'},

                {field: 'status', title: '状态', templet: function (row){
                    let enumList = [{"title":"未发布","value":"0","no":"1"},{"title":"已发布","value":"1","no":"2"}];
                    let value = row.status;
                    for(let idx=0;idx<enumList.length;idx++){
                        if(enumList[idx].value == value) {
                            return enumList[idx].title;
                        }
                    }
                    return '--';
                }},

                {field: 'thumbnail', title: '缩略图', align: 'center', event: 'thumbnail', templet: "#gid-20-tno-2-thumbnail_templet"},
                              {title: '操作', width: '', fixed: 'right', templet: '#gid-20-tno-2-cms_article_row_toolbar'}
            ]],
            done: function (a,b,c) {
                console.log('tableIns', tableIns);
                tableIns.expandAll&&tableIns.expandAll()
            }
        });

        table['gid-20-tno-2-cms_article-table'] = tableIns;

        // 监听表格工具栏事件
        table.on("toolbar(gid-20-tno-2-cms_article-table)", eventListener)

        // 监听表格行事件
        table.on("tool(gid-20-tno-2-cms_article-table)", eventListener)

                              ;
        // 事件监听
        function eventListener(obj) {
            let event = obj.event;
            let data = obj.data;
            var postData = {};
            #if(notBlank(filterKey))
            postData.filterKey = '#(filterKey)';
            postData.filterValue = '#(filterValue)';
            #end
            switch (event) {
                case 'addSub':
                    postData.filterKey = '';
                    postData.filterValue = data.article_id;
                case 'add':
                    layui.$.post('/cms/article/table2/editPage', postData, function (str) {
                        layer.open({
                            type: 1,
                            title: '新建文章',
                            maxmin: true,
                            area: ['800px', '853px'],
                            content: str,
                        })
                    });
                    break;
                case 'edit':
                    postData.article_id = data.article_id;
                    layui.$.post('/cms/article/table2/editPage', postData, function (str) {
                        layer.open({
                            type: 1,
                            title: '编辑文章',
                            maxmin: true,
                            area: ['800px', '853px'],
                            content: str,
                        })
                    });
                    break;
                case 'dels':
                    let checkStatus = table.checkStatus('gid-20-tno-2-cms_article-table');
                    let selectRow = checkStatus.data;
                    deleteRow(selectRow);
                    break;
                case 'del':
                    let row = obj.data;
                    deleteRow([row]);
                    break;
            }
            console.log('toolbar_event', obj)
        }

        // 删除行方法
        function deleteRow(selectRows) {
            if (selectRows.length <= 0) {
                layer.msg('请先钩选要删除的记录行！');
                return;
            }
            layer.confirm('确定要删除这' + selectRows.length + '条记录吗？',
                {icon: 3, title: '提示', btn: ['确认删除', '取消']},
                function (index) {
                    console.log(index);
                    layui.$.ajax({
                        url: '/cms/article/table2/delete',
                        data: {
                            ids: selectRows.map((row) => row.article_id)
                        },
                        traditional: true,
                        type: 'POST',
                        success: function (result) {
                            if (result.success) {
                                layer.msg('删除成功', {icon: 6});
                                table.reload('gid-20-tno-2-cms_article-table');
                            } else {
                                layer.msg('删除失败！' + result.message, {icon: 5});
                            }
                        }
                    });
                });
        }
    })
</script>